<template>
	<view class="locus-page">
		<mapTrack :info="locusInfo.locationList" :wholeInfo="locusInfo.detailInfo" :sInfo="sInfo" :eInfo="eInfo"
			v-if="locusInfo.locationList.length > 0">
		</mapTrack>
		<no-data v-else-if="pageInit"></no-data>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tabs from '../components/tabs.vue';
	import wholePage from './whole.vue';
	import mapTrack from './mapTrack.vue';
	import msg from '@/components/msgTemplate/index.vue';
	import noData from '@/components/noData/index.vue';

	import hwOperatorLocationApi from '@/api/hwOperator/hwOperatorLocationApi'


	let that = null
	export default {
		components: {
			tabs,
			wholePage,
			mapTrack,
			msg,
			noData
		},
		data() {
			return {
				pageInit: false,
				operatorId: "",
				startTime: "",
				endTime: "",
				operatorName: "",
				locusInfo: {
					detailInfo: {},
					locationList: [],
					alarmList: [],
				},
				alarmRowList: [
					{
						name: '车牌号码',
						value: 'operatorName'
					},
					{
						name: '报警类型',
						value: 'warnName'
					},
					{
						name: '报警时间',
						value: 'occurTime'
					},
					// {
					// 	name: '处理时间',
					// 	value: 'solveTime'
					// },
					// {
					// 	name: '停车时长',
					// 	value: 'long'
					// },
					// {
					// 	name: '当前速度',
					// 	value: 'speed'
					// },
					// {
					// 	name: '地理位置',
					// 	value: 'addr'
					// }
				]
			}
		},
		computed: {
			// 轨迹起点
			sInfo() {
				if (this.locusInfo.locationList.length > 0) {
					return this.locusInfo.locationList[0]
				} else {
					return {
						time: '--',
						addr: '无数据'
					}
				}
			},
			// 轨迹终点
			eInfo() {
				if (this.locusInfo.locationList.length > 0) {
					return this.locusInfo.locationList[this.locusInfo.locationList.length - 1]
				} else {
					return {
						time: '--',
						addr: '无数据'
					}
				}
			},
			tabsLists() {
				return [{
						title: '轨迹',
						value: 0
					},
					{
						title: `告警(${this.locusInfo.alarmList.length})`,
						value: 1
					},
				]
			}
		},
		onLoad(options) {
			that = this
			console.log("trackDetail:", options)
			this.operatorId = options.operatorId
			this.operatorName = decodeURIComponent(options.operatorName)
			this.startTime = decodeURIComponent(options.startTime)
			this.endTime = decodeURIComponent(options.endTime)

			uni.setNavigationBarTitle({
				title: options.operatorName
			})
			this.getOperatorHistoryTrack()
		},
		methods: {
			getOperatorHistoryTrack() {
				console.log(this.startTime, this.endTime)
				hwOperatorLocationApi.hwOperatorHistoryTrack({
						operatorId: this.operatorId,
						startTime: this.startTime,
						endTime: this.endTime
					})
					.then((res) => {
						console.log('onSearch', res)
						if (res && res.code == '200') {
							var list = res.data.location
							that.locusInfo.locationList.splice(0, that.locusInfo.locationList.length)
							for (var i in list) {
								var item = list[i]
								that.locusInfo.locationList.push(item)
							}
						}
					})
					.finally(() => {
						this.pageInit = true
					})
			},

		}
	}
</script>

<style scoped>
	.locus-page {
		min-height: 100vh;
		box-sizing: border-box;
		background: #F9F9FA;
	}

	.locus-page>>>.tabs {
		top: 0 !important;
	}
</style>